﻿<div class="dx-fieldset form">
    <div class="dx-field">
        <div class="dx-field-label">Default mode</div>
        <div class="dx-field-value-static">
            <p>
                <span id="subject1">Google AdWords Strategy</span>
                (<a id="link1">details</a>)
            </p>
            @(Html.DevExtreme().Popover()
                .Target("#link1")
                .ShowEvent("mouseenter")
                .HideEvent("mouseleave")
                .Position(Position.Top)
                .Width(300)
                .ContentTemplate(@<text>
                    Make final decision on whether we are going to
                    increase our Google AdWord spend based
                    on our 2013 marketing plan.
                </text>)
            )
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">With title</div>
        <div class="dx-field-value-static">
            <p>
                <span id="subject2">
                    Rollout of New Website and Marketing Brochures
                </span>
                (<a id="link2">details</a>)
            </p>
            @(Html.DevExtreme().Popover()
                .Target("#link2")
                .ShowEvent("mouseenter")
                .HideEvent("mouseleave")
                .Position(Position.Bottom)
                .Width(300)
                .ShowTitle(true)
                .Title("Details:")
                .ContentTemplate(@<text>
                    The designs for new brochures and
                    website have been approved.
                    Launch date is set for Feb 28.
                </text>)
            )
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">With animation</div>
        <div class="dx-field-value-static">
            <p>
                <span id="subject3">
                    Create 2012 Sales Report
                </span>
                (<a id="link3">details</a>)
            </p>
            @(Html.DevExtreme().Popover()
                .Target("#link3")
                .ShowEvent("mouseenter")
                .HideEvent("mouseleave")
                .Position(Position.Top)
                .Width(300)
                .Animation(a => a
                    .Show(s => s
                        .Type(AnimationType.Pop)
                        .From(new { scale = 0 })
                        .To(new { scale = 1 })
                    )
                    .Hide(h => h
                        .Type(AnimationType.Fade)
                        .From(1)
                        .To(0)
                    )
                )
                .ContentTemplate(@<text>
                    2012 Sales Report has to be completed
                    so we can determine if major changes
                    are required to sales strategy.
                </text>)
            )
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">With overlay</div>
        <div class="dx-field-value-static">
            <p>
                <span id="subject4">Website Re-Design Plan</span>
                (<a id="link4">more</a>)
            </p>
            @(Html.DevExtreme().Popover()
                .Target("#link4")
                .ShowEvent("dxclick")
                .Position(Position.Top)
                .Width(300)
                .Shading(true)
                .ShadingColor("rgba(0, 0, 0, 0.5)")
                .ContentTemplate(@<text>
                    The changes in our brochure designs for 2013 require
                    us to update key areas of our website.
                </text>)
            )
        </div>
    </div>
</div>
